<template>
    <div class="select-color c-clearfix">
        <span class="select-label">{{ label }}</span>
        <div class="select-group" :style="{width: width}">
            <a href="javascript:" class="select-value" :class="{cue: show}" :style="{width: width}" @click="toggle">
                {{ selectItem ? '' : placeholder }}
                <span v-if="selectItem" class="select-color" :style="{background: selectItem[colorKey]}"></span>
            </a>
            <div v-show="show" class="select-list-wrap" :style="{width: width}">
                <ul>
                    <li v-for="(item, index) in selectList">
                        <a href="javascript:" class="select-color" :style="{background: item[colorKey]}" @click="select(index)"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'selectColor',
        data(){
            return {
                show: false,
            }
        },
        computed: {
            selectItem(){
                for(let i = 0; i < this.selectList.length; i++){
                    if(this.selectList[i].selected){
                        return this.selectList[i];
                    }
                }
                return null;
            },
        },
        watch: {
            show(val){
                if(val){
                    this.$root.$el.addEventListener('click', this.hide);
                }else{
                    this.$root.$el.removeEventListener('click', this.hide);
                }
            },
        },
        methods: {
            select(index){
                this.selectList.forEach(
                    (item, cindex) => {
                        if(index==cindex){
                            this.$set(item, 'selected', true);
                            this.$emit('select', item);
                        }else{
                            this.$set(item, 'selected', false);
                        }
                    }
                );
            },
            // 切换显示
            toggle(){
                if(! this.show){
                    setTimeout(function () {
                        this.show = !this.show;
                    }.bind(this),0);
                }
            },
            hide(){
                this.show = false;
            },
        },
        props: {
            colorKey: {type: String, default: 'value'},
            selectList: {type: Array, default: () => []},
            label: {type: String, default: ''},
            width: {type: String, default: '160px'},
            placeholder: {type: String, default: '选择颜色'},
        }
    }
</script>

<style lang="scss">
    .select-color{
        display: inline-block;
        .select-label{float: left;line-height: 32px;margin-right: 3px;}
        .select-group{float: left;position: relative;border: 1px solid #afb8bd;border-radius: 4px;background: #fff;height: 30px;}
        a.select-value{position: relative;float: left;color: #bbb;line-height: 30px;padding: 0 30px 0 6px;width: 160px;box-sizing: border-box;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
        .select-value:after{content: '';position: absolute;top: 9px;right: 7px;width: 20px;height: 13px;background-image: url(/static/images/arrow.png);background-position: 20px 0;}
        .select-value.cue:after{background-position: 0 0;}
        .select-color{display: inline-block;width: 24px;height: 24px;border-radius: 4px;margin-top: 3px;border: 1px solid #ddd;box-sizing: border-box;margin-left: 6px; }
        .select-value .select-color{margin-left: 0;}
        .select-list-wrap{
            position: absolute;top: 31px;left: -1px;width: 160px;background: #fff;border-radius: 4px;padding: 4px 0;z-index: 9;border: 1px solid #afb8bd;max-height: 300px;overflow: auto;
            li{float: left;}
        }
    }
</style>
